<template>
  <div>
    <el-descriptions :title=projectInfo.projectName class="margin-top" :column="3" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          姓名
        </template>
        {{ projectInfo.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-phone-outline"></i>
          手机号
        </template>
        {{ projectInfo.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-collection"></i>
          专业
        </template>
        {{ projectInfo.major }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          居住地
        </template>
        {{ projectInfo.address }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-collection-tag"></i>
          备注
        </template>
        <el-tag size="small">{{ this.categoryName }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-coin"></i>
          申请金额
        </template>
        {{ projectInfo.projectPrice }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-time"></i>
          申请时间
        </template>
        {{ projectInfo.applyTime.replace("T", " ") }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-edit"></i>
          银行卡号
        </template>
        {{ projectInfo.bankNumber }}
      </el-descriptions-item>
    </el-descriptions>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>已提交文件</span>
      </div>
      <div v-for="item in fileList" :key="item" class="text item">
        <span>{{ item.file_name }}</span>
      </div>
    </el-card>

    <el-steps :active=projectInfo.checkProgress finish-status="error">
      <el-step v-for="item in checkList" :key="item.id" :title="item.title"></el-step>
    </el-steps>
    <el-input
        type="textarea"
        :rows="3"
        style="width: 50%;margin:10px auto auto 230px"
        v-model="projectInfo.failRemark">
    </el-input>

    <el-popconfirm
        confirm-button-text='确定'
        cancel-button-text='不用了'
        icon="el-icon-info"
        icon-color="red"
        title="确定删除当前申请和文件吗？"
        @confirm="deleteApply"
    >
      <el-button class="withdraw-button" type="danger" slot="reference">撤销申请</el-button>
    </el-popconfirm>
  </div>
</template>

<script>
export default {
  name: "ApplyRejectDetail",
  data() {
    return {
      projectId: 0,
      categoryName: "",
      fileList: [],
      checkList: [],
      schoolCheck: [
        {
          id: 1,
          title: "提交文件"
        },
        {
          id: 2,
          title: "校级审批"
        },
        {
          id: 3,
          title: "审批完成"
        }
      ],
      cityCheck: [
        {
          id: 1,
          title: "提交文件"
        },
        {
          id: 2,
          title: "校级审批"
        },
        {
          id: 3,
          title: "教育局审批"
        },
        {
          id: 4,
          title: "审批完成"
        }
      ],
      projectInfo: [{
        projectName: "",
        name: "",
        phone: "",
        major: "",
        address: "",
        bankNumber: "",
        category: -1,
        projectPrice: 0,
        checkProgress: 0,
        failRemark: "",
        applyTime: "",
      }
      ]
    }
  },
  mounted() {
    this.getApplyDetail()
    this.getApplyFile()
  },
  methods: {
    getApplyDetail() {
      this.$axios.post("/apply/getApplyDetail", {
        projectId: parseInt(this.$route.query.projectId),
        userId: this.$store.getters.getUser.id
      }).then(res => {
        this.projectInfo = res.data.data
        this.getCategoryName()
      })
    },
    getCategoryName() {
      if (this.projectInfo.category === 1 || this.projectInfo.category === 3) {
        this.categoryName = "校级"
        this.checkList = this.schoolCheck
      }
      if (this.projectInfo.category === 2 || this.projectInfo.category === 4) {
        this.categoryName = "市级"
        this.checkList = this.cityCheck
      }
    },
    getApplyFile() {
      this.$axios.post("/apply/getApplyFile", {
        projectId: parseInt(this.$route.query.projectId),
        userId: this.$store.getters.getUser.id
      }).then(res => {
            this.fileList = res.data.data
          }
      )
    },
    deleteApply() {
      this.$axios.post("/apply/deleteApply", {
        projectId: parseInt(this.$route.query.projectId),
        userId: this.$store.getters.getUser.id
      }).then(res => {
        if (res.data.code === 200)
          this.$message.error("撤销成功")
        this.$router.push("/myApply")
      })
    }
  }
}
</script>

<style scoped>
.el-descriptions {
  margin-top: 17px;
}

.el-steps {
  width: 80%;
  margin-top: 40px;
  margin-left: 100px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  margin: 5px auto 5px 200px;
  width: 480px;
}

.withdraw-button {
  margin: 50px auto auto 420px
}
</style>